<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <button id="connect"> 连接</button>
     <button id="send" disabled="true"> 发送数据</button> <br>
     从服务器接收的数据如下：</br>
     <span id="receive"></span>
     <script>
        let ws = null
        var connect =document.querySelector('#connect')
        var send =document.querySelector('#send')
        var receive =document.querySelector('#receive')
        
        connect.onclick = function(){
            // 创建服务端对象，并指定路径
          ws = new WebSocket('ws://localhost:9998')
          ws.onopen = () => {
            console.log('连接服务器成功...')
            send.disabled = false
          }
          ws.onclose = () => {
            console.log('连接服务器失败')
            send.disabled = true
          }
          ws.onmessage = (msg) => {
            console.log('接收到服务器发送的数据了')
            console.log(msg)
            receive.innerHTML =msg.data
          }
        }
        // 往服务端发消息
        send.onclick = function(){
            ws.send(JSON.stringify({
              action: 'fullScreen',  //fullScreen
              socketType: 'fullScreen',
              chartName: 'trend',
              value: true
            }))
        }
     </script>
     
</body>
</html>